new Vue({
  el: '#root',

  data: {
    swiperIst: null,
    selectImage: 1,
    swiperOption: {
      onClick: (s, e) => console.log(s, e),
      slidesPerView: 4,
      spaceBetween: 10,
      slidesPerGroup: 1,
      loop: true,
      loopFillGroupWithBlank: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      }
    }
  },

  mounted () {
    this.swiperIst = new Swiper ('.swiper-container', {
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      },
      onClick: function (params) {
        console.log(params)
      },
      slidesPerView: 4,
      spaceBetween: 10,
      slidesPerGroup: 1,
      // loop: true,
      // loopFillGroupWithBlank: true,
    }) 
  },

  methods: {
    onClickPrev () {
      this.swiperIst.slidePrev()
    },
    onClickNext () {
      this.swiperIst.slideNext()
    },
  }
})